<template>
    <div>
        <el-container class="content">
            <el-header>
                <div class="header-text">
                    广告位管理
                </div>
                <div>
                    <el-link
                        href="http://doc.74cms.com/#/se/content?id=pc%E9%A6%96%E9%A1%B5%E5%B9%BF%E5%91%8A%E4%BD%8D%E5%88%86%E5%B8%83%E5%9B%BE"
                        target="_blank" type="primary" :underline="false">查看广告位图例位置说明</el-link>
                </div>
            </el-header>
            <el-main>
                <el-alert type="warning" :closable="false" class="alert">
                    <template #default>
                        <p>系统内置广告位不能删除！</p>
                        <p>自定义广告位调用名不可以以“QS_”开头</p>
                    </template>
                </el-alert>
                <el-table :data="tableData" style="width: 100%;margin:2% 0;" @select-all='selectAll' @select='select'>
                    <el-table-column type="selection" width="55" :selectable='selectable'/>
                    <el-table-column prop="name" label="广告位名称" >
                        <template #default="scope">
                            <div>
                                [{{platforms[scope.row.platform]}}]{{scope.row.name}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="call_name" label="调用名称" />
                    <el-table-column label="建议尺寸" >
                        <template #default="scope">
                            {{(scope.row.width + '*' + scope.row.height)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="广告数量" />
                    <el-table-column prop="address" label="类型" >
                        <template #default="scope">
                            <el-tag type="info" v-if="scope.row.call_name?.slice(0,3) == 'QS_'">系统内置</el-tag>
                            <el-tag v-else>自定义</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" >
                        <template #default="scope">
                            <el-button type="primary" @click="edit(scope.row.id)">编辑</el-button>
                            <el-button type="danger" :disabled="scope.row.call_name?.slice(0,3) == 'QS_'" @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="main-bottom">
                    <div class="main-bottom-left">
                        <el-button type="primary" @click="add">添加广告位</el-button>
                        <el-button type="danger" @click='dels' :disabled='selectList.length == 0'>删除所选</el-button>
                    </div>
                    <div class="main-bottom-right">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled"
                            :background="background" layout="total, sizes, prev, pager, next, jumper" :total="tableList.length"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import {getCurrentInstance, onMounted,  ref} from 'vue'
// import {platFormSpaces} from '@/api/platform/platformspace'
const {proxy} = getCurrentInstance()
// 存放广告位信息
const tableData = ref([]);
// 存放分页数据
const tableList = ref([])
// 获取广告位信息
const gettableData = async ()=>{
    let data = await proxy.$API.platformspace.platFormSpaces.get();
    tableData.value = data.slice((currentPage.value-1)*pageSize.value,pageSize.value*currentPage.value);
    tableList.value = data;
}
// 广告播放平台
const platforms = ref(['',
'APP','触屏端' ,'微信小程序' ,'pc端'
])
onMounted(()=>{
    gettableData()
})
const currentPage = ref(1)
const pageSize = ref(5);
const handleSizeChange = (data)=>{
    // console.log('每页显示条数',data);
    pageSize.value = data
    tableData.value = tableList.value.slice((currentPage.value-1)*pageSize.value,pageSize.value*currentPage.value)
}
const handleCurrentChange = (data)=>{
    // console.log('上一页和下一页',data);
    currentPage.value = data
    tableData.value = tableList.value.slice((currentPage.value-1)*pageSize.value,pageSize.value*currentPage.value)
}
const add = ()=>{
    proxy.$router.push('/advertise/addadvertisingSpace')
}
const edit = (id)=>{
    // console.log(id,);
    proxy.$router.push(`/advertise/editadvertisingSpace?id=${id}`)
}
const del = async (id)=>{
    await proxy.$API.platformspace.delplatformSpace.delete(id);
    gettableData()
    proxy.$message.success('删除成功')
}
// 批量删除
const dels = ()=>{
    selectList.value.forEach(async id => {
       await proxy.$API.platformspace.delplatformSpace.delete({id});
    });
    proxy.$message.success('批量删除成功')
}
// 存放选中的表格行
const selectList = ref([])
// 全选
const selectAll = (select)=>{
    selectList.value = select.map(item=>item.id)
}
// 单选
const select = (select)=>{
    selectList.value = select.map(item=>item.id)
}
// 是否可以选择
const selectable = (row)=>{
    console.log(row);
    return row.call_name.slice(0,3) != 'QS_'
}
</script>

<style lang="less" scoped>
.content {
    margin: 10px;

    .header-text {
        font-size: 18px;
    }

    .el-main {
        background-color: #fff;

        .alert {
            border-left: 4px solid !important;

            p {
                font-size: 14px !important;
                margin: 11px 0;
            }
        }

        .main-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
::v-deep .el-table__header{
    font-size: 16px !important;
}
::v-deep .el-table__body{
    font-size: 14px !important;
}
</style>